<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>查看机器</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
        .organizeName,
        .operation span:first-of-type {
            color: #1990FF;
        }

        .operation span:last-of-type {
            color: #F5222D;
        }

        .pageNav {
            margin: 0 auto;
            width: fit-content;
        }

        .pageNav a,
        .operation span {
            cursor: pointer;
            display: inline-block;
        }

        cite {
            cursor: default;
        }

        .twoRow {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .layui-table tr td:nth-of-type(3) {
            min-width: 5em;
        }

        td
        {
            white-space: nowrap;
            text-align: center;
        }

    </style>
</head>
<body>
<script src="./js/main.js" charset="utf-8"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>-->
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/jQuery.main.js"></script>

<form class="layui-form" action="" lay-filter="data">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto !important;">搜索：</label>
            <input type="text" name="machineModel" class="layui-input" style="width: 14em;" placeholder="机器型号名称" value="">
        </div>

        <div class="layui-inline">
            <input id="deptName" type="text" name="deptName" class="layui-input" style="width: 14em;" placeholder="所属部门" value="" onclick="isAdminOfMachine()">
        </div>
        <div class="layui-inline">
            <input type="text" name="machineNum" class="layui-input" style="width: 14em;" placeholder="机器编号" value="">
        </div>
        <div class="layui-inline" style="width: 10em !important;">
            <select name="status">
                <option value="">状态</option>
                <option value="true">可用</option>
                <option value="false">不可用</option>
            </select>
        </div>
        <div class="layui-inline">
            <input type="text" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="10">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">查询机器</button>
        </div>
    </div>
</form>

<table class="layui-table" lay-skin="line">
    <thead>
    <tr>
        <th style="text-align: center">机器编号</th>
        <th style="text-align: center">机器型号</th>
        <th style="text-align: center">机器状态</th>
        <th style="text-align: center">所属部门</th>
        <th style="text-align: center">加入时间</th>
        <th style="text-align: center">操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<div style="display: flex;">
    <div style="flex: 1">
        <div class="pageNav">
          <span class="layui-breadcrumb" lay-separator="-">
            <a class="fristPage">首页</a>
            <a class="lastPage">上一页</a>
            <a><cite>第<span id="page"></span>页</cite></a>
            <a class="nextPage">下一页</a>
            <a class="endPage">尾页</a>
          </span>
        </div>
    </div>
</div>

<script type="text/javascript">
    var displayStart = 1;
    var endPage = null;
    var layer = layui.layer;
    var laydate = null;
    var form = null;
    var list = null;

    layui.use(['form', 'element', 'laydate'], function() {
        form = layui.form;
        laydate = layui.laydate;

        search(1);

        form.on('submit(searchBtn)', function() {
            search(1);
            return false;
        });
        $('.fristPage').click(function() {
            search(1);
            return false;
        });
        $('.lastPage').click(function() {
            search((displayStart > 1 ? displayStart - 1 : 1));
            return false;
        });
        $('.nextPage').click(function() {
            search((displayStart < endPage ? displayStart + 1 : endPage));
            return false;
        });
        $('.endPage').click(function() {
            search(endPage);
            return false;
        })
        form.on('submit(changeBtn)', function() {
            var data = form.val('change');
            data.startTime = new Date(data.startTime).getTime();
            data.endTime = new Date(data.endTime).getTime();
            $.ajax({
                url: url + '/donation-project/saveOrUpdate',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function(res) {
                    layer.alert(res.msg, {
                        end: function() {
                            layer.closeAll();
                            search();
                        }
                    });
                }
            })
            return false;
        });
    })


    function edit(index) {
        $.ajax({
            url: '/sys-user/getAdminLevel/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
            if (res.code === 200) {//权限通过
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim',
                    area: ['350px', '350px'],
                    title: '修改机器信息',
                    content: `
            <form class="layui-form" action="" lay-filter="change">
              <div style="width: fit-content; margin: 10px auto;">

                <input type="text" name="id" style="display: none;" id="machineId">
                <div class="layui-form-item">
                  <div class="layui-block">
                    <label class="layui-form-label">状态：</label>
                    <div class="layui-input-block" style="width: 14em !important;">
                      <select name="status" id="status"  lay-filter="status" lay-verify="required" lay-search="">
                        <option value="true" id="true" >可用</option>
                        <option value="false" id="false">不可用</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-block">
                    <label class="layui-form-label">机器编号：</label>
                    <input type="text" id="machineNum" name="machineNum" lay-verify="required" autocomplete="" class="layui-input" style="width: 14em;"
                      placeholder="请输入机器编号">
                  </div>
                </div>

                <input type="button" class="layui-btn" value="确认修改" lay-submit="" lay-filter="changeBtn" style="margin: 20px auto 0;display: block;">
              </div>
            </form>
          `,
                    success: function() {
                        $.ajax({
                            url: url + '/all-machine/getMachine/'+index,
                            contentType: 'application/json',
                            success: function(res) {
                                $('#machineId').val(res.data.id);
                                $('#machineNum').val(res.data.machineNum);
                                if(res.data.status){
                                    $('#true').attr('selected','selected');
                                }else
                                    $('#false').attr('selected','selected');
                                form.render();
                            }
                        })
                        form.render();
                    }
                });
            }else if(res.code===400){
                layer.msg("权限不足!");
            }
          }
        })

        form.on('submit(changeBtn)', function(data) {
            console.log("校验通过，准备提交");
            var data = form.val("change");
            console.log(data);
            $.ajax({
                url: url + '/all-machine/update',
                method: 'POST',
                contentType: 'application/json',
                async: false,
                data: JSON.stringify(data),
                success: function(res) {
                    console.log(res);
                    if (res.code == 200) {
                        parent.layer.alert('保存编辑', {
                            end: function(){
                                location.reload();
                            }
                        });
                    }else{
                        layer.msg(res.msg)
                    }
                }
            })
            return false;
        })
    }

    function isAdminOfMachine() {
        $.ajax({
            url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.code===200){
                }
                else if (res.code===400){
                    $('#deptName').attr('disabled','disabled');
                    layer.msg("非管理员只能查看本部门机器");
                }
            }
        })
    }

    function deleteMachine(index) {
        let confirm1=layer.confirm('您确定要删除这台机器吗？', {
                btn: ['确定','取消']
            },function () {
                $.ajax({
                    url: url + '/all-machine/delete',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        userId: sessionStorage.getItem('userId'),
                        goalId: index
                    }),
                    success: function(res) {
                        layer.msg(res.msg)
                        if (res.code == 200) search();
                    }
                })
                layer.close(confirm1);
            },function (){
                layer.close(confirm1);
            }
        )
    }

    function search(index) {
        if (!index) var index = displayStart;
        var data = form.val('data');
        data.userId=sessionStorage.getItem('userId');
        data.displayStart = index;
        $.ajax({
            url: url + '/all-machine/list',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(res) {
                $('tbody').empty();
                displayStart = res.data.current;
                endPage = res.data.pages;
                list = res.data.records;
                for (var i = 0; i < res.data.records.length; i++) {
                    $('tbody').append(
                        "<tr>"+
                        "<td class='organizeName'>" + res.data.records[i].machineNum + "</td>" +
                        "<td class='organizeName'>" + res.data.records[i].machineModel + "</td>" +
                        "<td>" + isMachineStatus(res.data.records[i].status )+ "</td>" +
                        "<td>" + res.data.records[i].deptName + "</td>" +
                        "<td>" + res.data.records[i].createTime.replace('T', ' ') +"</td>" +
                        "<td class='operation'><button class='layui-btn layui-btn-normal layui-btn-sm' onclick='edit(" + res.data.records[i].id + ")'>编辑</button>　" +
                        "<button class='layui-btn layui-btn-danger layui-btn-sm' onclick='deleteMachine(" + res.data.records[i].id + ")'>删除</button></td>" +
                        "</tr>"
                    );
                }
                $('#page').html(displayStart)
            }
        })
    }
</script>
</body>
</html>
